<template>
	<view>
		<u-navbar :is-back="false" title="" :background="{backgroundColor: '#FFFFFF'}" title-color="#000000">
			<view class="slot-wrap w-full pl-[30rpx]">
				<view class="">
					{{t('funds.title')}}
				</view>
			</view>
			<view class="flex justify-end w-full pr-[30rpx] relative">
				<navigator hover-class="none" url="/packages/pages/user_wallet/record">
					<u-icon size="42" name="/static/images/common/record_b.png"></u-icon>
				</navigator>
			</view>
		</u-navbar>
		<view class="px-[30rpx] pt-[30rpx] mb-[30rpx]">
			<navigator hover-class="none" url="/pages/news_detail/detail?id=11">
				<view class="flex justify-between items-center mb-[30rpx] py-[20rpx] px-[30rpx] rounded-lg  bg-white">
					<view class="flex justify-start items-center">
						<view class="mr-[20rpx]">
							<u-icon size="40" name="/static/images/fund/fund_desc.png"></u-icon>
						</view>
						<view class="">
							{{t('funds.introduction')}}
						</view>
					</view>
					<view class="">
						<u-icon size="26" name="arrow-right"></u-icon>
					</view>
				</view>
			</navigator>
			<view class="bg-white rounded-lg py-[50rpx] px-[50rpx]">
				<view class="flex justify-around items-center mb-[30rpx]">
					<view class="text-center w-1/2">
						<view class="text-muted mb-[10rpx]">
							{{t('funds.totalAssets')}}
						</view>
						<view class="font-bold text-[#0066FF]">
							{{getCurrency()}}{{formatMoney(state.report.user_money)}}
						</view>
					</view>
					<view class="text-center w-1/2">
						<view class="text-muted mb-[10rpx]">
							{{t('funds.userPoint')}}
						</view>
						<view class="font-bold">
							{{state.report.user_point}}
						</view>
					</view>
					<!-- <view class="text-center w-1/3">
						<view class="text-muted mb-[10rpx]">
							{{t('funds.usedNoMoney')}}
						</view>
						<view class="font-bold">
							{{getCurrency()}}{{formatMoney(state.report.noused_money)}}
						</view>
					</view> -->

				</view>
				<view class="flex justify-between py-[20rpx]">
					<view @click="handleJump('/packages/pages/recharge/index')"
						class="text-center w-[48%] flex items-center justify-center rounded-lg py-[20rpx]"
						style="border: 1px solid #0066ff;">
						<u-icon class="mr-[20rpx]" size="44" name="/static/images/fund/recharge.png"></u-icon>
						{{t('funds.recharge')}}
					</view>
					<view @click="handleJump('/packages/pages/withdraw/index')"
						class="text-center w-[48%] flex items-center justify-center rounded-lg py-[20rpx] text-white"
						style="background: linear-gradient(114.5deg, #00A3FF 16.6%, #0066FF 85.41%);">
						<u-icon class="mr-[20rpx]" size="44" name="/static/images/fund/withdraw.png"></u-icon>
						{{t('funds.withdraw')}}
					</view>
				</view>
			</view>
		</view>
		<view class="mx-[30rpx] mb-[30rpx] font-bold flex justify-between">
			<view class=" ">
				{{t('funds.assetDetails')}}
			</view>
			<view class="text-[#0066FF]" @click="handleJump('/packages/pages/user_wallet/record')">
				{{t('funds.viewAll')}}
			</view>
		</view>
		<view class="mx-[30rpx] ">
			<view class="mt-[100rpx]" v-if="state.fund_list.length == 0">
				<u-empty :text="t('common.noData')" mode="data"></u-empty>
			</view>
			<navigator v-for="item in state.fund_list" :key="item.id" hover-class="none"
				:url="'/packages/pages/user_wallet/order_detail?id='+item.id">
				<view class="bg-white mb-[8px] px-[40rpx] py-[40rpx] rounded-lg">
					<view
						class="flex justify-between mb-[30rpx]  pb-[20rpx] border-solid border-b border-0 border-light ">
						<view class=" text-muted mr-1">{{item.create_time}}</view>
						<view class="text-success" v-if="item.action==1">
							{{t('tabs.in')}}
						</view>
						<view class="text-error" v-if="item.action==2">
							{{t('tabs.out')}}
						</view>
					</view>
					<view class="flex justify-between">
						<view class="w-[70%]">
							<view class="">
								{{t("finance.type" + item.type)}}
							</view>
							<view class="text-error mt-[12rpx]" v-if="item.remark">
								{{item.remark}}
							</view>
						</view>
						<view class="text-right w-[30%]">
							<text class="font-bold" :class="item.action==1?'text-success':'text-error'">
								{{getCurrency() }}{{formatMoney(item.amount)}}
							</text>
						</view>
					</view>
				</view>
			</navigator>
		</view>

	</view>
	<tabbar />
</template>

<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app'
	import { useAppStore } from '@/stores/app'
	import { reactive } from 'vue'
	import { fundIndex } from '@/api/finance'
	import { t, formatDate, getCurrency, formatMoney } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('funds.title') })
	const appStore = useAppStore()

	const state = reactive<{
		fund_list : any[]
		report : any[]
	}>({
		fund_list: [],
		report: {
			user_money:0,
			user_point: 0
		}
	})

	const handleJump = async (val : string) => {
		uni.navigateTo({
			url: val
		})
	}

	const getData = async () => {
		const data = await fundIndex({ date: formatDate(Math.round(Date.now() / 1000)) })
		state.fund_list = data.fund_list
		state.report = data.report
	}

	onShow(() => {
		getData()
	})
</script>

<style lang="scss">
</style>